<template>
	<el-dialog :title="dialog.title" v-model="dialog.isShowDialog" append-to-body :close-on-click-modal="false" width="1000px">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true">
			<el-form-item label="关联商品" prop="goods_id">
				<el-select
					v-model="queryParams.goods_id"
					clearable
					placeholder="请输入关键字或选择商品"
					filterable
					remote
					:remote-method="goodsIdRemoteMethod"
					remote-show-suffix
					:loading="goodsIdSelect.loading"
					@focus="onGoodsFocus"
				>
					<el-option v-for="item in goodsIdSelect.options" :key="item.id" :label="item.title" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="父订单" prop="pay_sn">
				<el-input v-model="queryParams.pay_sn" placeholder="请输入父订单" clearable />
			</el-form-item>
			<el-form-item label="子订单" prop="order_sn">
				<el-input v-model="queryParams.order_sn" placeholder="请输入子订单号" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="付款时间" align="center" prop="pay_time" />
			<el-table-column label="父订单号" align="center" prop="pay_sn" />
			<el-table-column label="子订单号" align="center" prop="order_sn" />
			<el-table-column label="商品信息" align="center" prop="title" />
			<el-table-column label="支付方式" align="center" prop="type" :formatter="formatterType" />
			<el-table-column label="手续费" align="center" prop="procedure_money" />
			<el-table-column label="货款应收金额（含手续费）" align="center" prop="money">
				<template #header> 货款应收金额<br />（含手续费） </template>
			</el-table-column>
			<el-table-column label="货款实收金额" align="center" prop="receipts" />
			<el-table-column label="结算日期" align="center" prop="finish_time" :formatter="formatterFinishTime" />
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { supplier1Api } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

const Supplier1Api = supplier1Api();
export default {
	setup() {
		const state = reactive({
			dialog: {
				isShowDialog: false,
				type: '',
				title: '结算订单详情',
				submitLoading: false,
			},
			queryParams: {
				goods_id: '',
				pay_sn: '',
				order_sn: '',
				withdrawal_no: '',
				type: '',
				pageNum: 1,
				pageSize: 10,
			},
			tableList: [],
			loading: false,
			total: 0,
			goodsIdSelect: {
				loading: false,
				options: [] as any,
			},
		});
		const queryFormRef = ref();

		/********** 触发事件 **********/
		// 关联商品获取焦点
		const onGoodsFocus = () => {
			if (!state.queryParams.goods_id) {
				_goodsSelect({ pageNum: 1, pageSize: 10 });
			}
		};
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			queryFormRef.value.resetFields();
			onQuery();
		};

		/********** 方法事件 **********/
		const openDialog = (params: any) => {
			state.dialog.isShowDialog = true;
			state.queryParams = {
				goods_id: '',
				pay_sn: '',
				order_sn: '',
				withdrawal_no: params.withdrawal_no,
				type: params.type,
				pageNum: 1,
				pageSize: 10,
			};
			getList();
		};
		// 刷新列表
		const getList = () => {
			state.loading = true;
			_applyPaymentOrderList(state.queryParams);
		};
		// 关联商品搜索
		const goodsIdRemoteMethod = (query: string) => {
			if (!query) return;
			_goodsSelect({ pageNum: 1, pageSize: 10, title: query });
		};
		// 支付方式字典
		const formatterType = (row: any) => {
			switch (row.type) {
				case 1:
					return '微信支付';
				case 2:
					return '余额支付';
				case 3:
					return '积分支付';
				case 4:
					return '分账支付';
				default:
					return '未知错误';
			}
		};
		// 结算日期字典
		const formatterFinishTime = (row: any) => {
			return timeDictionary(row.finish_time);
		};

		/********** 网络请求 **********/
		// 搜索商品
		const _goodsSelect = (params: Object) => {
			state.goodsIdSelect.loading = false;
			Supplier1Api.goodsSelect(params)
				.then((res) => {
					state.goodsIdSelect.options = res.data.list;
					state.goodsIdSelect.loading = false;
				})
				.catch(() => (state.goodsIdSelect.loading = false));
		};
		// 结算订单信息【待审核和已通过】
		const _applyPaymentOrderList = (params: Object) => {
			Supplier1Api.applyPaymentOrderList(params)
				.then((res) => {
					state.tableList = res.data.list;
					state.loading = false;
				})
				.catch(() => (state.loading = false));
		};

		return {
			queryFormRef,
			onGoodsFocus,
			onQuery,
			onResetQuery,
			openDialog,
			getList,
			goodsIdRemoteMethod,
			formatterType,
			formatterFinishTime,
			...toRefs(state),
		};
	},
};
</script>
